<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>注册</title>
    <link rel="stylesheet" href="./css/login.css" />
    
  </head>

  <body>
    <div class="wraper">
      <div class="container">
        <div class="logo">
          <img class="icon" src="./images/logo.png" />
          <div class="title">英雄管理系统</div>
        </div>
        <div class="input-container">
          <div class="phone">
            <img class="icon" src="./images/phone.png" />
            <input placeholder="用户名" type="text" id="userName" name="userName" />
          </div>
          <div class="validate">
            <div class="code">
              <img class="icon" src="./images/mail.png" />
              <input placeholder="密码" type="password" id="userPwd" name="userPwd" />
            </div>
          </div>
        </div>
        <div id="tips"></div>
        <input onclick="register()" type="submit" class="btn" value="注册" />
      </div>
    </div>

    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/md5.min.js"></script>
    <script>
      function register() {
        // console.log('注册用户的函数')
        const userName = $('#userName').val().trim()
        const userPwd = $('#userPwd').val().trim()

        if (userName === '' || userPwd === '') {
          return alert('请输入用户名和密码')
        }

        // 发送请求注册用户
        $.ajax({
          url: 'http://127.0.0.1:3001/user/register',
          method: 'POST',
          data: {
            userName,
            userPwd: md5('heima', userPwd),
          },
          success: (res) => {
            if(res.code === 200) {
              window.location.href='./login.html'
            } else {
              // 错误处理
            }
          }
        })
      }
    </script>
  </body>
</html>
